<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="login()">POST /login</button>
    <button onclick="getPosts()">GET /posts</button>
    <button onclick="getPostsById(2)">GET /posts/:id</button>

    <button onclick="addPostsJSON()">(JOSN) POST /posts</button>
    <button onclick="updatePostsById(2)">(JOSN) PATCH /posts/:id</button>
    <button onclick="deletePostsById(2)">DELETE /posts/:id</button>

    <script src="./axios.js"></script>
    <script>
      /*
        axios对象方法参数：
        1. url 路由地址
        2. 报文主体 GET,DELETE请求可以省略
        3. 配置项
          ① params 配置查询参数
          ② headers 配置报文头部字段
        复制克隆了axios，axios 实例
        1. 配置公共URL部分baseURL
        2. 配置公共header部分
        3. 局部配置项优先生效，同名全局配置项会被局部覆盖，经常被用于部分请求单独（特例）设置

        拦截器
        1. 修改所有请求的报文头部主体
        2. 修改所有响应的报文头部主体
        3. 更高级，更灵活的，动态全局配置方式
      */

      // 复制克隆了axios，全局配置项
      const request = axios.create({
        baseURL: "http://127.0.0.1:3008",
        // headers: {
        //   authorization: localStorage.token,
        // },
      });

      // 发送： xhr(axios)->interceptors.request->服务器
      // 请求拦截器
      request.interceptors.request.use(
        (config) => {
          //配置报文头部配置字段
          // if (config.url !== "/login") {
          //   config.headers["authorization"] = localStorage.token;
          // }
          return config;
        },
        (err) => {
          return Promise.reject(err);
        }
      );

      // 接收：服务器 ->interceptors.response->xhr(axios)
      request.interceptors.response.use(
        (response) => {
          // console.log(response);
          // response.data = { a: 1 };
          return response;
        },
        (err) => {
          return Promise.reject(err);
        }
      );

      function login() {
        request
          .post("/login", {
            username: "jack",
            password: "123123",
          })
          .then((res) => {
            localStorage.token = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // query string查询字符串传参
      function getPosts() {
        request
          .get("/posts", {
            params: { id_gte: 2, id_lte: 5 },
          })
          .then((res) => {
            console.log(res);
          })
          .catch((e) => {
            console.log(e);
          });
      }
      // path 路径传参
      function getPostsById(id) {
        request
          .get(`/posts/${id}`)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // 报文主体（JOSN）传参
      function addPostsJSON() {
        request
          .post("/posts", {
            author: "tom",
            title: "hello tome",
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
      // path 路径传参+报文主体（JOSN）传参
      function updatePostsById(id) {
        request
          .patch(`/posts/${id}`, {
            title: "hahaha ...",
          })
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
      // path 路径传参
      function deletePostsById(id) {
        request
          .delete(`/posts/${id}`)
          .then((res) => console.log(res))
          .catch((err) => console.log(err));
      }
    </script>
  </body>
</html>
